<template>
  <h1>Home</h1>
  <BoardComponent/>
  <ul>
    <li v-for="item of posts">
      {{ item.id }}- {{ item.title }}
    </li>
  </ul>
</template>

<script>
import BoardComponent from "../components/BoardComponent.vue";
import { provide, ref } from "vue"
import myMixin from "../myMixin";
import http from "../utils/http";

export default {
  components: {
    BoardComponent
  },
  mixins: [myMixin],
  created() {
    this.hello()
  },
  setup() {
    provide("msg", "我是来自HomePage的provide")
    const posts = ref([])

    http({
      // url: "http://localhost:4000/posts"
      // url: "http://localhost:4000/posts?_sort=id&_order=asc"
      url: `/posts?_sort=id&_order=desc`
    }).then(res => {
      console.log(res)
      // posts.value = res.data
    })

    return {
      posts
    }
  }
  /*
  provide: {
    msg: "我是来自HomePage的provide"
  }

  父组件有一个 provide 选项来提供数据，
  子组件有一个 inject 选项来开始使用这些数据
  */
}
</script>
